<template>
  <view class="share-con">

    <view class="s-item" v-for="item in shareList" :key="item.icon" @click="handleFn(item.id)" hover-class="hover-active">
      <button open-type="share" v-if="item.id== 2">
        <image :src="item.icon" mode="scaleToFill" class="s-icon" />
        <text style="font-size: 36rpx;">{{item.label}}</text>
      </button>
      <template v-else>
        <image :src="item.icon" mode="scaleToFill" class="s-icon" />
        <text>{{item.label}}</text>
      </template>

    </view>
  </view>
</template>

<script setup>
// 引入resource
import eyeIcon from "@/static/common/eye.svg";
import wxIcon from "@/static/common/wx.svg";
import removeIcon from "@/static/common/remove.svg";
import { getItem } from "@/utils/storage";
import useStore from "@/store";
const { common } = useStore();
const listConf = shallowReactive([
  {
    id: 1,
    label: "查看详情",
    icon: eyeIcon,
  },
  {
    id: 2,
    label: "分享卡片",
    icon: wxIcon,
  },
  {
    id: 3,
    label: "删除",
    icon: removeIcon,
  },
]);

const shareList = computed(() => {
  return listConf.filter((v) => common.shareItems.includes(v.id));
});

const handleFn = (id) => {
  if (id == 2) return;
  const { appLogin, phone } = getItem("user_info") || {};

  if (!appLogin) {
    common.updatePopupOpen(false, "share");

    setTimeout(() => {
      uni.navigateTo({ url: "/subPages/register/index" });
    }, 100);
    return;
  }

  if (!phone) {
    common.updatePopupOpen(false, "share");

    setTimeout(() => {
      uni.navigateTo({ url: "/subPages/register/contact" });
    }, 100);
    return;
  }

  const mObj = {
    1: detailsFn,
  };
  mObj[id]();
};

// 查看详情
const detailsFn = () => {
  common.updatePopupOpen(false, "share");
  setTimeout(() => {
    uni.navigateTo({ url: "/subPages/details/index" });
  }, 500);
};
</script>

<style lang=scss scoped>
@import "@/styles/global.scss";

.share-con {
  padding: 0 50rpx 68rpx;
  background: #fff;
  border-radius: 40rpx 40rpx 0 0;

  .s-item {
    display: flex;
    align-items: center;
    padding: 40rpx 0;
    font-weight: 500;
    font-size: 36rpx;
    color: #000;
    .s-icon {
      width: 80rpx;
      height: 80rpx;
      margin-right: 30rpx;
    }
  }

  .s-item + .s-item {
    border-top: 1rpx solid #ddd;
  }
}
</style>